<template>
  <div class="app-container home">
    <div class="header">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label" style="color: red">平台今日消耗能量</div>
              <div class="data-value">{{ Statistics.todayConsumeEnergy || 0 }}</div>
              <div class="data-comparison">
                <span class="trend-up">
                  <i class="fas fa-arrow-up"></i>
                  {{ Statistics.yestConsumeEnergy || 0 }}
                </span>
                <span style="color: #909399; margin-left: 4px;">平台昨日消耗能量</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label" style="color: red">平台今日消耗积分</div>
              <div class="data-value">{{ Statistics.todayConsumePoints || 0 }}</div>
              <div class="data-comparison">
                <span class="trend-up">
                  <i class="fas fa-arrow-up"></i>
                  {{ Statistics.yestConsumePoints || 0 }}
                </span>
                <span style="color: #909399; margin-left: 4px;">平台昨日消耗积分</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12">
        <el-card class="stats-card">
          <div class="text-center">
            <div class="data-label" style="color: #00afff">今日能量差</div>
            <div class="data-value">{{ (Statistics.todayProduceEnergy-Statistics.todayConsumeEnergy).toFixed(4) || 0 }}</div>
            <div class="data-comparison">
                <span class="trend-up">
                  <i class="fas fa-arrow-up"></i>
                  {{ (Statistics.yestProduceEnergy - Statistics.yestConsumeEnergy).toFixed(4) || 0 }}
                </span>
              <span style="color: #909399; margin-left: 4px;">昨日能量差</span>
            </div>
          </div>
        </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label" style="color: #00afff">今日积分差</div>
              <div class="data-value">{{ (Statistics.todayProducePoints - Statistics.todayConsumePoints).toFixed(4) || 0 }}</div>
              <div class="data-comparison">
                <span class="trend-up">
                  <i class="fas fa-arrow-up"></i>
                  {{ (Statistics.yestProducePoints - Statistics.yestConsumePoints).toFixed(4) || 0 }}
                </span>
                <span style="color: #909399; margin-left: 4px;">昨日积分差</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label" style="color: #1ab394">平台今日产生能量</div>
              <div class="data-value">{{Statistics.todayProduceEnergy || 0}}</div>
              <div class="data-comparison">
                <span class="trend-down">
                  <i class="fas fa-arrow-down"></i>
                  {{ Statistics.yestProduceEnergy || 0 }}
                </span>
                <span style="color: #909399; margin-left: 4px;">平台昨日产生能量</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label" style="color: #1ab394">平台今日产生积分</div>
              <div class="data-value">{{Statistics.todayProducePoints || 0}}</div>
              <div class="data-comparison">
                <span class="trend-down">
                  <i class="fas fa-arrow-down"></i>
                  {{ Statistics.yestProducePoints || 0 }}
                </span>
                <span style="color: #909399; margin-left: 4px;">平台昨日产生积分</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-row :gutter="20">
        <el-col :xs="24" :sm="8" :md="8">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">平台全部产生能量</div>
              <div class="data-value">{{Statistics.totalProduceEnergy || 0}}</div>
              <div class="data-comparison">
                <span class="trend-down">
                  <i class="fas fa-arrow-down"></i>
                  {{ Statistics.totalProducePoints || 0 }}
                </span>
                <span style="color: #909399; margin-left: 4px;">平台全部产生积分</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">平台消耗能量差</div>
              <div class="data-value">{{ (Statistics.totalProduceEnergy - Statistics.totalConsumeEnergy).toFixed(4) || 0 }}</div>
              <div class="data-comparison">
                  <span class="trend-up">
                    <i class="fas fa-arrow-up"></i>
                    {{ (Statistics.totalProducePoints - Statistics.totalConsumePoints).toFixed(4) || 0 }}
                  </span>
                <span style="color: #909399; margin-left: 4px;">平台全部消耗差</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">平台全部消耗能量</div>
              <div class="data-value">{{ Statistics.totalConsumeEnergy || 0 }}</div>
              <div class="data-comparison">
                <span class="trend-up">
                  <i class="fas fa-arrow-up"></i>
                  {{ Statistics.totalConsumePoints || 0 }}
                </span>
                <span style="color: #909399; margin-left: 4px;">平台全部消耗积分</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
                                  <!--     背包   -->
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">用户背包总能量</div>
              <div class="data-value">{{Amount.totalEnergy || 0}}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">用户背包总积分</div>
              <div class="data-value">{{Amount.totalPoints || 0}}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 平台今日手续费,平台全部手续费,平台昨日手续费  -->
    <div>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="8">
          <div style="margin-top: 12px;">
            <el-statistic
              :value="Statistics.todaySxf"
              title="平台今日手续费"
            ></el-statistic>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="8">
          <div style="margin-top: 12px;">
            <el-statistic
              :value="Statistics.totalSxf"
              title="平台全部手续费"
            >
            </el-statistic>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8">
          <div style="margin-top: 12px;">
            <el-statistic
              :value="Statistics.yestSxf"
              title="平台昨日手续费">
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 注册  -->
    <div style="margin-top: 20px;">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="8">
          <div style="margin-top: 12px;">
            <el-statistic
              :value="registrationData.todayRegCount"
              title="今日注册"
            ></el-statistic>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="8">
          <div style="margin-top: 12px;">
            <el-statistic
              :value="registrationData.totalRegCount"
              title="总用户量"
            >
            </el-statistic>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8">
          <div style="margin-top: 12px;">
            <el-statistic
              :value="registrationData.yestRegCount"
              title="昨日注册">
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px;">
      <el-row :gutter="12">
        <el-col :xs="24" :sm="24" :md="8" v-for="(item,index) in vips" :key="index">
          <el-card shadow="hover">
            <div class="text item">会员卡名称:{{item.vipName}}</div>
            <div class="text item">{{item.type==0?'飞机卡':'广告卡'}}</div>
            <div class="text item">总计数量:{{item.totalCount}}</div>
            <div class="text item">未使用的数量:{{item.unusedCount}}</div>
            <div class="text item">已使用的数量:{{item.usedCount}}</div>
            <div class="text item">已过期的数量:{{item.expiredCount}}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="header">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">平台今日五房大逃杀产生利润</div>
              <div class="data-value">{{ Profit.todayfiveprofit || 0 }}</div>
              <div class="data-label">平台累计五房大逃杀产生利润</div>
              <div class="data-value">{{ Profit.totalfiveprofit || 0 }}</div>
              <div class="data-label">平台昨日五房大逃杀产生利润</div>
              <div class="data-value">{{ Profit.yestfiveprofit || 0 }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">平台今日八房大逃杀产生利润</div>
              <div class="data-value">{{ Profit.todayeightprofit || 0 }}</div>
              <div class="data-label">平台累计八房大逃杀产生利润</div>
              <div class="data-value">{{ Profit.totaleightprofit || 0 }}</div>
              <div class="data-label">平台昨日八房大逃杀产生利润</div>
              <div class="data-value">{{ Profit.yesteightprofit || 0 }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">平台今日极速竞技产生利润</div>
              <div class="data-value">{{ Profit.todaytwoprofit || 0 }}</div>
              <div class="data-label">平台累计极速竞技产生利润</div>
              <div class="data-value">{{ Profit.totaltwoprofit || 0 }}</div>
              <div class="data-label">平台昨日极速竞技产生利润</div>
              <div class="data-value">{{ Profit.yesttwoprofit || 0 }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">平台今日星战裁决产生利润</div>
              <div class="data-value">{{ Profit.todayabsoluteprofit || 0 }}</div>
              <div class="data-label">平台累计星战裁决产生利润</div>
              <div class="data-value">{{ Profit.totalabsoluteprofit || 0 }}</div>
              <div class="data-label">平台昨日星战裁决产生利润</div>
              <div class="data-value">{{ Profit.yestabsoluteprofit || 0 }}</div>
            </div>
          </el-card>
        </el-col>
       <!-- -------------------------      -->
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">平台今日爬塔游戏产生利润</div>
              <div class="data-value">{{ Profit.todayclimprofit || 0 }}</div>
              <div class="data-label">平台累计爬塔游戏产生利润</div>
              <div class="data-value">{{ Profit.totalclimprofit || 0 }}</div>
              <div class="data-label">平台昨日爬塔游戏产生利润</div>
              <div class="data-value">{{ Profit.yestclimprofit || 0 }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12">
          <el-card class="stats-card">
            <div class="text-center">
              <div class="data-label">平台今日飞机发泄场游戏产生利润</div>
              <div class="data-value">{{ Profit.todayairprofit || 0 }}</div>
              <div class="data-label">平台累计飞机发泄场游戏产生利润</div>
              <div class="data-value">{{ Profit.totalairprofit || 0 }}</div>
              <div class="data-label">平台昨日飞机发泄场游戏产生利润</div>
              <div class="data-value">{{ Profit.yestairprofit || 0 }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {dataStatistics, registration, totalAmount,getVip,gameProfit} from '@/api/index/index'

export default {
  name: "Index",
  data() {
    return {
      like: true,
      value1: 4154.564,
      value2: 1314,
      title: "增长人数",
      Statistics: {
        todayConsumeEnergy: 0,//平台今日消耗能量(包含 游戏投入、飞机注入能量、兑换会员卡、购买靓号)--
        todayConsumePoints: 0,//平台今日消耗积分--
        todayProduceEnergy: 0,//平台今日产生能量(包含飞机产出、直推间推分成、开宝箱)--
        todayProducePoints: 0,//平台今日产生积分(游戏内获得)--
        yestConsumeEnergy: 0,//平台昨日消耗能量(包含 游戏投入、飞机注入能量、兑换会员卡、购买靓号)--
        yestConsumePoints: 0,//平台昨日消耗积分--
        yestProduceEnergy: 0,//平台昨日产生能量(包含飞机产出、直推间推分成、开宝箱)--
        yestProducePoints: 0,//平台昨日产生积分(游戏内获得)--
        todaySxf: 0,//平台今日手续费(包含交易市场)
        totalSxf: 0,//平台全部手续费(包含交易市场)
        yestSxf: 0,//平台昨日手续费(包含交易市场)
        totalConsumeEnergy: 0,//平台全部消耗能量（累计）(包含 游戏投入、飞机注入能量、兑换会员卡、购买靓号)--
        totalConsumePoints: 0,//平台全部消耗积分（累计）--
        totalProduceEnergy: 0,//平台全部产生能量（累计）(包含飞机产出、直推间推分成、开宝箱)--
        totalProducePoints: 0,//平台全部产生积分（累计）(游戏内获得)--
      },
      registrationData: {
        todayRegCount: 0,
        totalRegCount: 0,
        yestRegCount: 0
      },
      Amount:{
        totalEnergy:0,
        totalPoints:0
      },
      vips:[],
      Profit:{}
    }
  },
  created() {
    this.getdataStatistics()
    this.getRegistration()
    this.getTotalAmount()
    this.setVip()
    this.getGameProfit()
  },
  methods: {
    async getGameProfit(){
      let res = await gameProfit()
      this.Profit = res.data
    },
    async setVip(){
      let res = await getVip()
      this.vips = res.data
    },
    async getTotalAmount(){
      let res = await totalAmount()
      this.Amount = res.data
    },
    // 数据统计
    async getdataStatistics() {
      let res = await dataStatistics()
      this.Statistics = res.data
    },
    // 注册统计
    async getRegistration() {
      let res = await registration()
      this.registrationData = res.data
    },
    goTarget(href) {
      window.open(href, "_blank")
    }
  }
}
</script>

<style scoped lang="scss">
.text {
  font-size: 18px;
  font-weight: bold;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}

.main-container {
  padding: 20px;
  min-height: calc(100vh - 60px);
}

.header {
  margin-bottom: 20px;
}

.stats-card {
  transition: all 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chart-container {
  height: 350px;
  margin-bottom: 20px;
}

.trend-up {
  color: #f56c6c;
}

.trend-down {
  color: #67c23a;
}

.data-label {
  font-size: 16px;
  color: #333333;
  font-weight: 800;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin: 8px 0;
}

.data-comparison {
  font-size: 16px;
}

.el-card__body {
  padding: 20px;
}


/* 响应式布局 */
@media (max-width: 1200px) {
  .chart-container {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .main-container {
    padding: 10px;
  }

  .chart-container {
    height: 250px;
  }

  .data-value {
    font-size: 20px;
  }
}

</style>

